html {
  font-size: 12px;
}

body {
  *,
  .lowcode-scrollbar,
  .lowcode-scrollbar-thin {
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece,
    &::-webkit-scrollbar-corner {
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--te-common-border-default);

      &:hover {
        background-color: var(--te-common-border-hover);
      }
    }
  }
  *,
  .lowcode-scrollbar {
    &::-webkit-scrollbar {
      width: 4px;
      height: 8px;
    }
  }
  .lowcode-scrollbar-thin {
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }
  --base-left-panel-width: 280px;
  --base-right-panel-width: 280px;
  --base-top-panel-height: 40px;
  --base-top-panel-breadcrumb-line-height: 28px;
  --base-bottom-panel-height: 30px;
  --base-nav-panel-width: 40px; // 插件导航栏宽度
  --base-collection-panel-width: calc(
    (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) * 2 - 1px)) / 2
  );
  --base-collection-panel-full-screen-width: calc(
    (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) * 2 - 1px))
  );
  -webkit-font-smoothing: subpixel-antialiased;
  padding: 0;
  margin: 0;
  font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  color: var(--te-common-text-primary);
}

ol,
ul {
  list-style: none;
}

a {
  cursor: pointer;
  background-image: none;
  text-decoration: none;
  outline: none;

  &:focus,
  &:active,
  &:hover {
    outline: none;
    text-decoration: none;
  }
}

dl,
dt,
dd,
ul,
ol,
li,
th,
td {
  margin: 0;
  padding: 0;
}

#tiny-engine * {
  box-sizing: border-box;
}

.tiny-svg,
#tiny-engine .tiny-svg {
  outline: none;
}

#tiny-engine .svg-icon {
  fill: currentColor;
}

// support for not webkit browser and won't override ::webkit-scrollbar-* selector
@supports not selector(::-webkit-scrollbar) {
  body {
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--te-common-border-default) transparent;
    }
  }
}

// hide scrollbar
@supports not selector(::-webkit-scrollbar) {
  .lowcode-scrollbar-hide {
    scrollbar-width: none;
  }
}

.lowcode-scrollbar-hide {
  &::-webkit-scrollbar {
    display: none;
  }
}

.global-desc-info {
  color: var(--te-common-text-weaken);
}

.text-ellipsis-multiple {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tiny-popover.tiny-popover.option-popper {
  background: var(--te-common-bg-popover);
  border: 1px solid transparent;
  color: var(--te-common-text-secondary);
  padding: 0px 8px 12px;
  &[x-placement^='bottom'] {
    .popper__arrow {
      border-color: transparent;
      &,
      &::after {
        border-bottom-color: var(--te-common-bg-popover);
      }
    }
  }

  &[x-placement^='right'] {
    margin-left: 16px;

    .popper__arrow {
      left: -7px;
      border-color: transparent;
      &,
      &::after {
        border-right-color: var(--te-common-bg-popover);
      }
    }
  }

  &[x-placement^='top'] {
    .popper__arrow {
      border-color: transparent;
      &,
      &::after {
        border-top-color: var(--te-common-bg-popover);
      }
    }
  }

  &[x-placement^='left'] {
    .popper__arrow {
      right: -7px;
      border-color: transparent;
      &,
      &::after {
        border-left-color: var(--te-common-bg-popover);
      }
    }
  }

  .add-options {
    &.top {
      border-bottom: 1px solid var(--te-common-border-default);
      margin-bottom: 15px;
      overflow: hidden;
      display: flex;
      height: 26px;
      justify-content: space-between;
      align-items: center;
      padding: 6px;

      .title {
        font-weight: 600;
      }

      .icon-close {
        margin-bottom: 4px;
        margin-right: 0px;
      }
    }

    .demo-form {
      padding: 6px;

      .tiny-form-item {
        margin-bottom: 4px;

        :deep(.tiny-form-item__label) {
          color: var(--te-common-text-secondary);
        }

        :deep(.tiny-input__inner) {
          border-color: var(--te-common-border-default);

          &:focus {
            border-color: var(--te-common-bg-primary-checked);
          }
        }
      }

      :deep(.btn) {
        .tiny-form-item__content {
          display: flex;

          .tiny-button {
            min-width: auto;
            flex: 1;
          }
        }
      }
    }

    .tiny-svg {
      &.icon-close {
        margin: 10px;
      }

      &:hover {
        cursor: pointer;
      }

      &.header-icon {
        margin-right: 0;
      }

      &.isBind {
        color: var(--te-common-text-checked);
      }
    }
  }
  &.fixed-left.fixed-left {
    top: var(--base-top-panel-height) !important;
    transform: translateX(calc(4px - var(--base-right-panel-width) - var(--base-nav-panel-width)));
    height: calc(100% - var(--base-top-panel-height));
  }
}

.svg-currentcolor {
  fill: currentColor;
}
